<script setup lang="ts">
import BaseWindow from "../../base-window/index.vue";
import SuccessBkg from "../../../assets/images/error.png";
import ErrorBkg from "../../../assets/images/success.png";
import { ref } from "vue";
const success = ref([
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
  {
    label: "施肥",
    value: "2023.06.19 12:00",
  },
]);
const errors = ref([
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
  {
    label: "光照强度",
    value: "2023.06.19 12:00",
  },
]);
</script>

<template>
  <div class="scroll-wrapper">
    <div class="scroll">
      <div
        class="scroll-title"
        :style="{ backgroundImage: `url(${SuccessBkg})` }"
      >
        农事记录
      </div>
      <div class="row-wrapper">
        <div class="row" v-for="item in errors">
          <div class="label success">{{ item.label }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
    <div class="scroll">
      <div
        class="scroll-title"
        :style="{ backgroundImage: `url(${ErrorBkg})` }"
      >
        报警记录
      </div>
      <div class="row-wrapper">
        <div class="row" v-for="item in errors">
          <div class="label error">{{ item.label }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scroll-wrapper {
  width: 430px;
  display: flex;
  justify-content: space-between;
  .scroll-title {
    width: 159px;
    height: 54px;
    box-sizing: border-box;
    padding: 11px;
  }
  .row-wrapper {
    height: 200px;
    overflow-y: scroll;
    .row {
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    }
    .success {
      color: #20ca93;
    }
    .error {
      color: #ff202f;
    }
  }
}
</style>
